<template>
	<div class="linkage-container" :class="{'vertical':isVertical}">
		<el-form-item  :prop="item.prop" :label="item.label" v-for="(item,index) in renderData" >
			<el-select v-model="selectedList[index]" filterable :placeholder="item.placeholder||defaultPlacholder"  
				 @change="selectChange(index,selectedList[index])" :style="{width:width+'px'}">
				<el-option v-for="optionItem in item.optionList" :key="optionItem[item.idName]" :label="optionItem[item.name]" :value="optionItem[item.idName]" ></el-option>
			</el-select>
		</el-form-item>
	</div>
</template>
<script>
	export default{
		mounted() {
			
		},
		model:{
			prop: 'selectedList',
			event: 'selectChange'
		},
		props:{
			selectedList:{
				type:Array,
				required:()=>[]
			},
			renderData:{
				type:Array,
				required:true,
				//示例数据
				// renderData:[
				// 	{
				// 		prop:"collegeId",
				// 		label:"学院",
				// 		name:"collegeName",
				// 		idName:"id",
				// 		optionList:this.collegeList
				// 	},
				// 	{
				// 		prop:"specialtyId",
				// 		label:"专业",
				// 		name:"specialtyName",
				// 		idName:"id",
				// 		optionList:[],
				// 		fun:"getSpecialtys",
				// 		paramName:"123"
				// 	}
				// ],
			},
			defaultPlacholder:{
				type:String,
				default:"请选择"
			},
			isVertical:{
				type:Boolean,
				default:false
			},
			width:{
				type:Number,
				default:202
			}
		},
		data(){
			return {
			}
		},
		methods:{
			async selectChange(index,val){
				let param = {}
				let selectedList =  this.selectedList;
				for(let i = index +1;i < this.renderData.length;i++){
					let item = this.renderData[i];
					selectedList[i] = null;
					let paramName = item.paramName;
					if(!paramName){
						paramName = this.renderData[i-1].prop;
					}
					param[paramName] = val ;
					if(item.fun){
						let ret = await this.$api[item.fun](param);
						item.optionList = ret.data.list
					}
				}
				this.selectedList = selectedList;
				this.$emit("selectChange",selectedList);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.linkage-container{
		display: flex;
	}
	.vertical{
		flex-direction: column;
	}
</style>
